<template>
  <el-dialog
    :title="`《${title}》`"
    :visible="dialogVisible"
    :before-close="handleClose"
    width="80%"
    height="50%">
    <div id="mse"></div>
  </el-dialog>
</template>

<script>
import Player, { Events } from 'xgplayer'
import HlsPlayer from 'xgplayer-hls'
import 'xgplayer/dist/index.min.css'
export default {
  data() {
    return {
      isDialogVisible: false,
    }
  },
  props: {
    title: {
      type: String,
      default: '',
    },
    dialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    dialogVisible: {
      handler(newVal) {
        this.isDialogVisible = newVal
      },
    },
  },
  mounted() {
    console.log('11')
  },
  methods: {
    handleClose() {
      this.isDialogVisible = false
    },
  },
}
</script>

<style></style>
